import React from 'react'
import { Tag,Space } from 'antd-mobile'
import { LocationFill } from 'antd-mobile-icons'
import './index.css'
export default function Note(props) {
  const {avatar,name,gender,age,tag,position,onClick} = props;
  return (
    <div className='note-container' onClick={onClick}>
        <img src={avatar} alt="宠物" />
        <div className='note-content'>
          <p style={{fontSize:'14px',fontWeight:'bold' }}>{name}</p>
          <Space>
            <Tag color='#f1f1f3' style={{color:'#000000'}}>
              {gender}
            </Tag>
            <Tag color='#f1f1f3'style={{color:'#000000'}}>
              {age}岁
            </Tag>
            <Tag color='#f1f1f3'style={{color:'#000000'}}>
              {tag}
            </Tag>
          </Space>
            <div className='note-pos'> 
            <Tag color='#fffff'style={{color:'#f57906'}}>
            <LocationFill /> {position ? position : '重庆市'}
            </Tag>
            </div>

        </div>
      
    </div>
  )
}
